<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*这几个顺序必须这样，否则不行,因为先link 在hover 在active 在visited ,方法lvha ,lv是a标签独有的 */
        /*很像类但不是类，是元素特殊状态的一种描述*/
        /*没有访问过的a*/
        a:link{
            color: gray;
        }
        /*访问过的a*/
        a:visited{
            color: red;
        }
        /*鼠标悬浮*/
        a:hover{
            color: blue;
        }
        /*激活（点下去没抬起来）*/
        a:active{
            color: green;
        }
        /*获取焦点，指正在输入,只有表单才有这个属性，input,select*/
        input:focus,select:focus {
            color: orange;
            background-color: green;
        }
       /*p必须是最后一个，若p下面还有个span则最后一个p没有颜色,是按所有孩子计算*/
       div>p:last-child{
           color: red;
       }
       /*nth-child这个是说div的p孩子，这个孩子是第偶数个孩子，且p标签*/
       /*nth-of-type 这个是说div的第偶数个p孩子，因为div的孩子可能不仅仅是p标签，比如下面有scan*/
       /*选第n个孩子,也是按所有孩子计算,n是选择所有,2n是偶数,even一样偶数，2n+1是奇数odd */
       div>p:nth-child(even){
           color: red;
       }
       /* 选择前5个,-n从-0,到-5,后面全是负数不显示 5-n不行，括号里面必须an+b */
       div>p:nth-child(-n+5){
           color: red;
       }
       /* 让下面的第一个p变红，第一个child是span,所以不是1 */
       div>p:nth-child(2){
           color: red;
       }
       /*用type可以选择特定类型，防止干扰*/
       div>p:first-of-type{
           color: red;
       }

    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.xiaohongshu.com/explore">小红书</a>
<br>
<input type="text">

<select>
    <option>1</option>
    <option>2</option>
</select>

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <span>7</span>
</div>

<div>
    <span>0</span>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>
</body>
</html>